<template>
	<view>
		<!--#ifdef APP-PLUS-->
		<view class="lz-status_bar">
			<view class="lz-top_view"></view>
		</view>
		<!--#endif-->
		<view class="kaoshi-head">
			<view class="kaoshi-head-top">
				<view class="kaoshi-head-left" @tap="navigateBack">
					<view class="iconfont icon-zuojiantou"></view>
				</view>
				<view class="kaoshi-head-m">练习报告</view>
			</view>
		</view>
		<view class="kaoshi-bg" style="background-image: url('')">
			<view class="kaoshi-question-over">
				<view class="endtime">交卷时间：{{pages_params.end_time}}</view>
				<view class="kaoshi-baogao">
					<circle-progress-bar :animate="false" :border_width="5" border_color="#3c7bfc" :size="125"
						border_back_color="#f3f3f3" :pro="pages_params.zhengquelv/100 ">
						<!-- content -->
						<view class="kaoshi-baogao-title">
							<view class="kaoshi-baogao-title-l">{{pages_params.zhengquelv}}</view>%
						</view>
						<view class="kaoshi-baogao-text">正确率</view>
					</circle-progress-bar>
					<view class="kaoshi-baogao-text" style="margin-top: 15px;">答对题数/已做题数</view>
				</view>
				<view class="kaoshi-question-over-content">
					<view class="kaoshi-question-over-content-flex">
						<view>练习时间</view>
						<view class="kaoshi-question-over-content-text">{{use_time}}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>答对题数</view>
						<view class="kaoshi-question-over-content-text">{{pages_params.right_num}}</view>
					</view>
					<view class="flexline"></view>
					<view class="kaoshi-question-over-content-flex">
						<view>本次答题数</view>
						<view class="kaoshi-question-over-content-text">{{pages_params.total_num}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import circleProgressBar from '@/components/circle-progress-bar/circle-progress-bar.vue'
	export default {
		data() {
			return {
				pages_params: {},
			}
		},
		computed: {
			use_time() {
				let start = this.pages_params.start_time || 0
				let end = (new Date(this.pages_params.end_time)).getTime()
				let sec = parseInt((end - start) / 1000);
				let hour = parseInt(sec / 3600);
				let miu = parseInt((sec - hour * 3600) / 60);
				let s = sec - hour * 3600 - miu * 60;
				// formatDigit
				hour = this.$myUtils.$common.formatDigit(hour)
				miu = this.$myUtils.$common.formatDigit(miu)
				s = this.$myUtils.$common.formatDigit(s)
				return `${hour}:${miu}:${s}`
			}
		},
		components: {
			circleProgressBar
		},
		onLoad(opts) {
			this.pages_params = opts;
			this.pages_params.zhengquelv = parseInt(this.pages_params.zhengquelv).toFixed(0)
		},
		methods: {
			navigateBack() {
				uni.navigateBack(2);
			},
			goto_detail(type) {
				if (type === 2) {
					this.$openrul('/src/pages/mine/learn/wrongQuestion/list?unit_id=' + this.pages_params.unit_id);
				} else {
					this.$openrul('/src/pages/mine/learn/collect/list?unit_id=' + this.pages_params.unit_id)
				}
			}
		}
	};
</script>

<style>
	page {
		background: #f6f6f6;
	}

	.kaoshi-bg {
		background-position: top;
		background-size: 100%;
		background-repeat: no-repeat;
		padding: 20px 15px 0;
	}

	.endtime {
		font-size: 14px;
		color: #aaa;
	}

	/*练习报告*/
	.kaoshi-question-over {
		background-color: #fff;
		padding: 15px 20px 25px;
		border-radius: 8px;
	}

	.kaoshi-question-over-content {
		display: flex;
		width: 100%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #9a9a9a;
	}

	.kaoshi-question-over-content-flex {
		flex: 1;
		text-align: center;
	}

	.kaoshi-question-over-content-text {
		color: #000;
		font-size: 20px;
		padding-top: 4px;
	}

	.kaoshi-baogao {
		margin: 25px auto 30px;
		text-align: center;
		color: #000;
		display: flex;
		align-items: center;
		flex-direction: column;
	}

	.kaoshi-baogao-title {
		display: flex;
		justify-content: center;
		align-items: baseline;
		font-size: 12px;
	}

	.kaoshi-baogao-title-l {
		font-size: 24px;
	}

	.kaoshi-baogao-text {
		margin-top: 5px;
		font-size: 12px;
		color: #aaa;
		letter-spacing: .5px;
	}

	.flexline {
		height: 25px;
		border-right: 1px solid #f3f3f3;
	}
</style>
